<template>
<div class="problemdetail" >
     <div class="processit-title" >
            <mt-header title="问题详情" class="mt-header">
                <mt-button icon="back" slot="left" class="back" @click="$root.goBack()">返回</mt-button>
            </mt-header>
    </div>
    <div class="replace"></div>
   <div class="prodetail-view">
      <p class="problemtime">{{this.detail.createTimeString}}</p>
    <div class="probleminfo">
        <div class="topinfo">
            <img src="../assets/oper.png" alt="">
            <div class="title">
                 <span>{{this.detail.title}}&nbsp;&nbsp;</span>
                    <i>{{this.detail.createTime | datefmt('YYYY-MM-DD')}}</i>
                <em>{{this.detail.createrName}}</em>
            </div>
        </div>
        <div class="bottominfo">
            <ul>
                <li>
                    <span >服务目录：</span><i >{{this.detail.remark}}</i>
                </li>
                <li>
                    <span >联系方式：</span><i>{{this.detail.mobile}}</i>
                </li>
                <li>
                    <span>描述：</span><i>{{this.detail.content}}</i>
                </li>
            </ul>
        </div>
    </div>
    <p class="newreply">最新回复</p>
    <div class="replyitem" v-for="item in replyList" :key="item.id">
        <p class="replytime">{{item.timeString}}</p>
        <div class="replyinfo">
            <div class="content">
                <p>{{item.createName}}：</p>
                <div class="info">{{item.content}}</div>
            </div>
        </div>
    </div>
    <div class="followreply">
        <div class="borderleft"></div>
        <p>跟进回复</p>
        <div class="followinfo">
            <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
            <button @click="submitReply">回复</button>
        </div>
    </div>  
   </div>
</div>
</template>

<script>
import { Header, MessageBox } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import service from "../service";
import config from "configuration";
export default {
  components: {
    Header,
    MessageBox
  },
  data() {
    return {
      content: "",
      replyList: [],
      detail: {},
      workcode: ""
      // suggest:this.$route.params.id
    };
  },
  watch: {
    $route: function() {
        this.getItDetail();
    }
  },
  computed: {
    ...mapGetters({
      loading: "getLoading",
      direction: "getDirection"
    })
  },
  mounted() {
    this.getItDetail();
  },
  methods: {
    submitReply() {
      if (this.content.length <= 0) {
        MessageBox({
          title: "提示",
          message: "回复内容不能为空"
        });
        return;
      }
      var params = {};
      params.suggestId = this.$route.params.id;
      params.userId = this.workcode;
      params.content = this.content;
      service.addItReplay(params).then(res => {
        if (res.code == 100) {
          // console.log(params)
          this.content = "";
          MessageBox({
            title: "提示",
            message: "回复成功"
          });
        }
      });
      this.getItDetail();
    },
    getItDetail() {
      service.getUser().then(data => {
        var params = {};
        params.workcode = this.workcode = data.employeenumber;
        params.suggest = this.$route.params.id||0;
          service.itDetail(params).then(res => {
            if (res.code == 100) {
              this.detail = res.data.detail;
              // console.log(this.detail)
              if (this.detail.title.indexOf("-") > 0) {
                this.detail.title = this.detail.title.split("-")[0];
              }
              this.replyList = res.data.replyList;
              // console.log(this.replyList);
            }
          });
      });
    }
  }
};
</script>
<style scoped>
  .prodetail-view::-webkit-scrollbar{
	display: none;
}
</style>